<style>
    body{
        background:#f2f2f2!important;
    }
    .xian {
        width: 8px;
        height: 20px;
        background: #486bd3;
        margin-right: 10px;
        margin-left: 10px;
    }
    .tab-label{
        width: 100px;
        text-align: center;
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        margin: 0;
        font-weight: 500;
        margin-left: -10px;
    }
    .tab-labels{
        box-sizing: border-box;
        background: #edf0f9;
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #333;
    }
    .tabs-content{
        display: flex;
        flex-direction: column-reverse;
        padding-top: 20px;
        width: 95%;
        margin: auto;
    }

    .tabs-content > div.active {
        display: block;
    }
    .hang .col-sm-2 {
        width: 100%;
        text-align: left;
    }
    .hang{
        width: 100%;
        display: flex;
    }
    .hang .form-group{
        width: 25%;
        float: left;
    }
    .modal .modal-dialog{
        width: 56%;
    }
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <input type="hidden" id="one_id" name="row[one_id]" value = ''>
    <div class="tab-labels">
        <div class="xian"></div>
        <label class="tab-label active">接报案信息</label>
    </div>
    <div style="width:100%;background:#fff;margin-bottom:10px;padding:10px;box-sizing:border-box;">
        <div class="hang">
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('车牌号')}:</label>
                <div class="col-xs-12 col-sm-10">
                    <input id="car_num" class="form-control" type="text" value="">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('服务单号')}:</label>
                <div class="col-xs-12 col-sm-10">
                    <input id="tong_number" class="form-control" type="text" value="">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('被服务人')}:</label>
                <div class="col-xs-12 col-sm-10">
                    <input id="learned_name" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('车架号')}:</label>
                <div class="col-xs-12 col-sm-10">
                    <input id="car_vin" class="form-control" type="text" >
                </div>
            </div>
        </div>
        <div class="hang">
            <!--搜索展示开始-->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                查询
                            </h4>
                        </div>
                        <style>
                            .modal-body tr,td{
                                border: 1px solid #ccc;
                            }
                            .modal-body tr td{
                                width:120px;
                                padding:5px;
                                text-align: center;
                            }
                        </style>
                        <div class="modal-body">
                            <table style="border: 1px solid #ccc;" id="table">

                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal" style="margin: 0;">
                                取消
                            </button>
                            <button type="button" class="btn btn-primary" onclick="xuanze()"  style="margin: 0;">
                                确定
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
            <!--结束-->
            <div class="col-xs-12 col-sm-8">
                <div id="quan_sou" class="ann" style="width:70px;right: -60px;text-align: center;line-height:30px;background: #1b4fe7;color: #fff;border-radius: 5px;cursor:pointer;float: left;" data-toggle="modal" onclick="chaxun()">查询</div>

                <div class="ann" style="width:100px;right: -60px;text-align: center;line-height:30px;background: #1b4fe7;color: #fff;border-radius: 5px;cursor:pointer;float: left;margin-left: 10px;" data-toggle="modal" onclick="fuwudan()">服务单信息</div>

                <div class="ann" style="width:100px;right: -60px;text-align: center;line-height:30px;background: #1b4fe7;color: #fff;border-radius: 5px;cursor:pointer;float: left;margin-left: 10px;" data-toggle="modal" onclick="baoan()">报案信息</div>

                <div class="ann" style="width:100px;right: -60px;text-align: center;line-height:30px;background: #1b4fe7;color: #fff;border-radius: 5px;cursor:pointer;float: left;margin-left: 10px;" data-toggle="modal" onclick="dian()">电子服务单</div>
            </div>
            <div class="col-xs-12 col-sm-8">
            </div>

        </div>
    </div>
    <div class="tabs">
        <div class="tab-labels">
            <div class="xian"></div>
            <label class="tab-label active">接报案录入</label>
        </div>
        <div class="tabs-content">
            <div class="tab active">
                <div class="hang">
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('报案单号')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input id="c-baoan_id" class="form-control" name="row[baoan_id]" type="text" value="" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('服务单号')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input id="c-tong_number" class="form-control" name="row[tong_number]" type="text" value="" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('车牌号')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input id="c-car_num" class="form-control" name="row[car_num]" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('车架号')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input id="c-car_vin" class="form-control" name="row[car_vin]" type="text" >
                        </div>
                    </div>
                </div>
                <div class="hang">
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('被服务人')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input id="c-learned_name" class="form-control" name="row[learned_name]" type="text" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('被服务人手机')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input id="c-learned_phone" class="form-control" name="row[learned_phone]" type="text" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('核统日期')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input id="c-yw_hetong_time" class="form-control" name="row[yw_hetong_time]" type="text">
                        </div>
                    </div>
                </div>
                <div class="hang">
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('归属部门')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            {:build_select('row[yw_class]', $selectMenu, '', ['class'=>'form-control', 'required'=>'','id'=>'c-yw_class'])}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('归属人')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input id="c-yw_belonger" class="form-control" name="row[yw_belonger]" type="text" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('服务起期')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input id="c-plan_strattime" class="form-control" name="row[plan_strattime]" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('服务止期')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input id="c-plan_endtime" class="form-control" name="row[plan_endtime]" type="text">
                        </div>
                    </div>
                </div>
                <div class="hang">
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('报案人')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input id="c-baoan_ren" class="form-control" name="row[baoan_ren]" type="text" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('报案人电话')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input id="c-baoan_phone" class="form-control" name="row[baoan_phone]" type="text" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('报案时间')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input id="c-baoan_time" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[baoan_time]" type="text" value="">
                        </div>
                    </div>
                </div>

                <div class="hang">
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('出险时间')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input id="c-chuxian_time" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[chuxian_time]" type="text" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('事故情况')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <select name="row[shigu_condition]" class="form-control">
                                <option value="">请选择事故情况</option>
                                <option value="单方">单方</option>
                                <option value="多方">多方</option>
                            </select>
<!--                            <input id="c-shigu_condition" class="form-control" name="row[shigu_condition]" type="text" value="">-->
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('是否有人伤')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <select name="row[is_renshang]"  class="form-control">
                                <option value="">请选择是否有人伤</option>
                                <option value="0">否</option>
                                <option value="1">是</option>
                            </select>
<!--                            <input id="c-is_renshang" class="form-control" name="row[is_renshang]" type="text" value="">-->
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('交强投保公司')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input id="c-car_tbgs" class="form-control" name="row[car_tbgs]" type="text" value="">
                        </div>
                    </div>
                </div>

                <div class="hang">
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('驾驶员')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input id="c-car_ren" class="form-control" name="row[car_ren]" type="text" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('驾驶员电话')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <input id="c-phone" class="form-control" name="row[phone]" type="text" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('道路类型')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <select name="row[daolu_type]" class="form-control">
                                <option value="">请选择道路类型</option>
                                <option value="高速公路">高速公路</option>
                                <option value="普通公路">普通公路</option>
                                <option value="市区道路">市区道路</option>
                                <option value="庭院车场">庭院车场</option>
                                <option value="矿山地带">矿山地带</option>
                                <option value="乡村道路">乡村道路</option>
                                <option value="其它">其它</option>
                            </select>
<!--                            <input id="c-daolu_type" class="form-control" name="row[daolu_type]" type="text" value="">-->
                        </div>
                    </div>
                </div>

                <div class="hang">
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('是否现场报案')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <select name="row[is_xcba]" class="form-control">
                                <option value="">请选择是否现场报案</option>
                                <option value="0">否</option>
                                <option value="1">是</option>
                            </select>
<!--                            <input id="c-is_xcba" class="form-control" name="row[is_xcba]" type="text" value="">-->
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('是否联系交警')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <select name="row[is_lxjj]" class="form-control">
                                <option value="">请选择是否联系交警</option>
                                <option value="0">否</option>
                                <option value="1">是</option>
                            </select>
<!--                            <input id="c-is_lxjj" class="form-control" name="row[is_lxjj]" type="text" value="">-->
                        </div>
                    </div>
                </div>

                <div class="hang">
                    <div class="form-group" style="width: 100%">
                        <label class="control-label col-xs-12 col-sm-2">{:__('出险地点')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <div class="form-inline" data-toggle="cxselect" data-selects="province,city,area">
                                <select class="province form-control" name="row[province]" data-url="ajax/area"></select>
                                <select class="city form-control" name="row[city]" data-url="ajax/area"></select>
                                <select class="area form-control" name="row[area]" data-url="ajax/area"></select>
                                <input id="c-address" class="form-control" name="row[address]" type="text" value="" style="width: 300px;">
                            </div>

                        </div>
                    </div>
                </div>
                <div class="hang">
                    <div class="form-group" style="width: 100%!important;">
                        <label class="control-label col-xs-12 col-sm-2">{:__('出险描述')}:</label>
                        <div class="col-xs-12 col-sm-10">
                            <textarea id="c-chuxian_describe" class="form-control" name="row[chuxian_describe]" type="text" rows="5" value=""></textarea>
                        </div>
                    </div>
                </div>
                <div class="form-group " style="margin-top: 50px;padding-bottom: 50px;">
                    <label class="control-label col-xs-12 col-sm-2"></label>
                    <div class="col-xs-12 " style="text-align: center;margin: auto;">
                        <button  class="tab-label1 btn btn-primary btn-embossed" style="width:100px;background: #1b4fe7" type="submit" onclick="return tijiao()">提交查勘</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</form>

<script src="/assets/js/ace1.4/assets/js/jquery.min.js" type="text/javascript"></script>
<script>
    /**
     * 查询数据
     */
    function chaxun(){
        var car_num = document.getElementById('car_num').value;
        var tong_number = document.getElementById('tong_number').value;
        var learned_name = document.getElementById('learned_name').value;
        var car_vin = document.getElementById('car_vin').value;
        // 检查是否全部为空
        if (!car_num && !tong_number && !learned_name && !car_vin) {
            layer.alert('至少填写一个字段')
            return false; // 阻止表单提交
        }
        $.ajax({
            url:"{:url('buchang/baoan/liulan')}",
            type:"post",
            data:{
                car_num:car_num,
                tong_number:tong_number,
                learned_name:learned_name,
                car_vin:car_vin
            },
            dataType:"json",
            success:function(res){
                if(res.data.length > 0){
                    var obj = res.data;
                    var str = '';
                    str += '<tr>';
                    str += '<td>' + "选择" + '</td>';
                    str += '<td>' + "服务单号" + '</td>';
                    str += '<td>' + "车牌号" + '</td>';
                    str += '<td>' + "车架号" + '</td>';
                    str += '<td>' + "被服务人" + '</td>';
                    str += '<td>' + "核统日期" + '</td>';
                    str += '<td>' + "服务止期" + '</td>';
                    str += '</tr>';
                    for (var i = 0; i < obj.length; i++) {
                        str += '<tr id="tab'+obj[i].id+'">';
                        str += '<td>' + '<input type="checkbox" class="one_id" value='+obj[i].id+'>' + '</td>';
                        str += '<td>' + obj[i].tong_number + '</td>';
                        str += '<td>' + obj[i].car_num + '</td>';
                        str += '<td>' + obj[i].car_vin + '</td>';
                        str += '<td>' + obj[i].learned_name + '</td>';
                        str += '<td>' + obj[i].yw_hetong_time + '</td>';
                        str += '<td>' + obj[i].plan_endtime + '</td>';
                        str += '<td class="hidden-xs" hidden>' + obj[i].learned_phone + '</td>';
                        str += '<td class="hidden-xs" hidden>' + obj[i].yw_class + '</td>';
                        str += '<td class="hidden-xs" hidden>' + obj[i].yw_belonger + '</td>';
                        str += '<td class="hidden-xs" hidden>' + obj[i].plan_strattime + '</td>';
                        str += '</tr>';
                    }
                    $("#myModal").modal();
                    $("#table").html(str);
                }else{
                    layer.alert('没有查到符合的服务单')
                }
            }
        });
    }

    /**
     * 弹窗选择某一项后
     */
    function xuanze(){
        var tbodyObj = document.getElementById('table');
        var i = 0;
        $("table :checkbox").each(function(key,value){
            if($(value).prop('checked')){
                var tong_number = tbodyObj.rows[key+1].cells[1].innerHTML;
                document.getElementById('c-tong_number').value = tong_number;
                var car_num = tbodyObj.rows[key+1].cells[2].innerHTML;
                document.getElementById('c-car_num').value = car_num;
                var car_vin = tbodyObj.rows[key+1].cells[3].innerHTML;
                document.getElementById('c-car_vin').value = car_vin;
                var learned_name = tbodyObj.rows[key+1].cells[4].innerHTML;
                document.getElementById('c-learned_name').value = learned_name;
                var yw_hetong_time = tbodyObj.rows[key+1].cells[5].innerHTML;
                document.getElementById('c-yw_hetong_time').value = yw_hetong_time;
                var plan_endtime = tbodyObj.rows[key+1].cells[6].innerHTML;
                document.getElementById('c-plan_endtime').value = plan_endtime;
                var learned_phone = tbodyObj.rows[key+1].cells[7].innerHTML;
                document.getElementById('c-learned_phone').value = learned_phone;
                var yw_class = tbodyObj.rows[key+1].cells[8].innerHTML;
                $("#c-yw_class").val(yw_class);
                var yw_belonger = tbodyObj.rows[key+1].cells[9].innerHTML;
                document.getElementById('c-yw_belonger').value = yw_belonger;
                var plan_strattime = tbodyObj.rows[key+1].cells[10].innerHTML;
                document.getElementById('c-plan_strattime').value = plan_strattime;
                var one_id = tbodyObj.rows[key+1].cells[0].querySelector('input').value;
                document.getElementById('one_id').value = one_id;
                $('#myModal').modal('hide');
                i=1;
                return false
            }
        })
        if(i == 0){
            layer.alert('请选择需要报案的服务单')
        }

    }
    function tijiao(){
        var phone = $("#c-phone").val();
        if (phone == "") {
            layer.alert("请输入驾驶员电话");
            return false;
        }
        if(!(/^1[3456789]\d{9}$/.test(phone))){
            layer.alert("驾驶员电话号码有误，请重填");
            return false;
        }
        var tong_number = $("#c-tong_number").val();
        if (tong_number == "") {
            layer.alert("请选择服务单");
            return false;
        }

        var chuxian_time = $("#c-chuxian_time").val();
        if (chuxian_time == "") {
            layer.alert("请选择出险时间");
            return false;
        }

        var baoan_time = $("#c-baoan_time").val();
        if (baoan_time == "") {
            layer.alert("请选择报案时间");
            return false;
        }
    }

    function fuwudan(){
        var id = $('#one_id').val();
        console.log('id',id)
        if(id) {
            layer.open({
                type: 2,
                title: '服务单信息',
                maxmin: true,
                area: ['100%', '100%'],
                content: "{:url('buchang/baoan/fuwudan')}?id=" +
                    id,
            });
        }else{
            layer.msg('请先选择服务单')
        }
    }
    function baoan(){
        var id = $('#one_id').val();
        console.log('id',id)
        if(id) {
            layer.open({
                type: 2,
                title: '报案信息',
                maxmin: true,
                area: ['100%', '100%'],
                content: "{:url('buchang/baoan/baoan')}?id=" +
                    id,
            });
        }else{
            layer.msg('请先选择服务单')
        }
    }
    function dian(){
        var id = $('#one_id').val();
        console.log('id',id)
        if(id) {
            layer.open({
                type: 2,
                title: '电子服务单',
                maxmin: true,
                area: ['100%', '100%'],
                content: "{:url('lists/one/dian')}?one_id=" +
                    id,
            });
        }else{
            layer.msg('请先选择服务单')
        }
    }
</script>